<!DOCTYPE html>
<title>Test serialization of computed CSS variable values</title>
<!--

Adapted from https://dxr.mozilla.org/mozilla-central/source/layout/style/test/test_variable_serialization_computed.html

NOTE: CSS does not define the exact serialization of whitespace and comments
(see https://drafts.csswg.org/css-syntax/#serialization)
so an implementation could fail this test but still be conforming.

-->

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div>
  <span></span>
</div>

<script>
// Each entry is an entire declaration followed by the property to check and
// its expected computed value.
var values = [
  ["", "--z", "an-inherited-value"],
  ["--a: ", "--a", " "],
  ["--a: initial", "--a", ""],
  ["--z: initial", "--z", ""],
  ["--a: inherit", "--a", ""],
  ["--z: inherit", "--z", "an-inherited-value"],
  ["--a: unset", "--a", ""],
  ["--z: unset", "--z", "an-inherited-value"],
  ["--a: 1px", "--a", " 1px"],
  ["--a: var(--a)", "--a", ""],
  ["--a: var(--b)", "--a", ""],
  ["--a: var(--b); --b: 1px", "--a", "  1px"],
  ["--a: var(--b, 1px)", "--a", "  1px"],
  ["--a: var(--a, 1px)", "--a", ""],
  ["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""],
  ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", " something 3px url(whereever) calc(1em + 1px)"],
  ["--a: var(--b, var(--c, var(--d, Black)))", "--a", "    Black"],
  ["--a: a var(--b) c; --b:b", "--a", " a b c"],
  ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", " a b c d e"],
  ["--a: var(--b)red; --b:orange;", "--a", " orange/**/red"],
  ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", " orange/**/red"],
  ["--a: var(--b)var(--c,red); --b:orange;", "--a", " orange/**/red"],
  ["--a: var(--b,orange)var(--c); --c:red;", "--a", " orange/**/red"],
  ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],
  ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", " ('ab')[c]"],
  ["--a: '", "--a", " ''"],
  ["--a: '\\", "--a", " ''"],
  ["--a: \\", "--a", " \\\ufffd"],
  ["--a: \"", "--a", " \"\""],
  ["--a: \"\\", "--a", " \"\""],
  ["--a: /* abc ", "--a", " /* abc */"],
  ["--a: /* abc *", "--a", " /* abc */"],
  ["--a: url(http://example.org/", "--a", " url(http://example.org/)"],
  ["--a: url(http://example.org/\\", "--a", " url(http://example.org/\\\ufffd)"],
  ["--a: url('http://example.org/", "--a", " url('http://example.org/')"],
  ["--a: url('http://example.org/\\", "--a", " url('http://example.org/')"],
  ["--a: url(\"http://example.org/", "--a", " url(\"http://example.org/\")"],
  ["--a: url(\"http://example.org/\\", "--a", " url(\"http://example.org/\")"]
];

var div = document.querySelector("div");
var span = document.querySelector("span");

div.setAttribute("style", "--z:an-inherited-value");

values.forEach(function(entry, i) {
  var declaration = entry[0];
  var property = entry[1];
  var expected = entry[2];
  test(function() {
    span.setAttribute("style", declaration);
    var cs = getComputedStyle(span, "");
    assert_equals(cs.getPropertyValue(property), expected);
  }, "subtest #" + i + " with `" + declaration + "`");
});
</script>
